<template>
    <div style="height:100%;overflow-y: hidden;background: white;font-size:14px;">
        <div style="display: inline-flex;height:100%;background:white;">
            <draggable v-model="tasksList" :options="dragOptions1" class="" style="display: inline-flex;">
                <transition-group :name="'flip-list'" class="transition-group-list" style="display: inline-flex;">
                    <el-card v-for='taskListItem in tasksList' class="box-card" :body-style="cardbodystyle" :key='taskListItem.id'>
                        <div slot="header" class="clearfix">
                            <span class='card-list-head'>{{taskListItem.title}}</span>
                            <el-dropdown style="float: right; padding: 3px 0">
                                <span class="card-arrow-down">
                                    <i class="el-icon-arrow-down"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>添加任务</el-dropdown-item>
                                    <el-dropdown-item>删除任务</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <draggable v-model="taskListItem.taskList" :options="dragOptions2" class="draggableList">
                            <transition-group :name="'flip-list'" class="transition-group-list">
                                <div v-for="item in taskListItem.taskList" :key="item.id" class="list-group-item">
                                    {{item.title}}
                                </div>
                            </transition-group>
                        </draggable>
                    </el-card>
                </transition-group>
            </draggable>

        </div>

    </div>
</template>
<script>
    import draggable from 'vuedraggable'
    export default {
        components: {
            draggable,
        },
        data() {
            return {
                cardbodystyle: {
                    padding: '5px 0 0 0',
                    background: '#FAFAFA',
                    height: '100%',
                    overflow: 'auto',
                },
                tasksList:
                    [
                        {
                            id: 't1',
                            title: '待开发任务',
                            taskList:
                                [
                                    { id: '1', title: '开发任务一' },
                                    { id: '2', title: '第2行' },
                                    { id: '3', title: '第3行' },
                                    { id: '4', title: '第4行' },
                                    { id: '5', title: '第5行' },
                                ]
                        },
                        {
                            id: 't2',
                            title: '测试任务',
                            taskList:
                                [{ id: '2-1', title: '测试任务1' }]
                        },
                        {
                            id: 't3',
                            title: '开发任务',
                            taskList:
                                [
                                    { id: '3-1', title: '开发任务一' },
                                    { id: '3-2', title: '这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务，这是一条文字很长的任务。' },
                                    { id: '3-3', title: '第3行' },
                                    { id: '3-4', title: '第4行' },
                                    { id: '3-5', title: '第5行' },
                                    { id: '3-6', title: '开发任务一' },
                                    { id: '3-7', title: '这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务，这是一条文字很长的任务。' },
                                    { id: '3-8', title: '第3行' },
                                    { id: '3-9', title: '第4行' },
                                    { id: '3-10', title: '第5行' },
                                    { id: '3-11', title: '开发任务一' },
                                    { id: '3-12', title: '这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务，这是一条文字很长的任务。' },
                                    { id: '3-13', title: '第3行' },
                                    { id: '3-14', title: '第4行' },
                                    { id: '3-15', title: '第5行' },
                                    { id: '3-16', title: '开发任务一' },
                                    { id: '3-17', title: '这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务，这是一条文字很长的任务。' },
                                    { id: '3-18', title: '第3行' },
                                    { id: '3-19', title: '第4行' },
                                    { id: '3-20', title: '第5行' },
                                    { id: '3-21', title: '开发任务一' },
                                    { id: '3-22', title: '这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务，这是一条文字很长的任务。' },
                                    { id: '3-23', title: '第3行' },
                                    { id: '3-24', title: '第4行' },
                                    { id: '3-25', title: '第5行' },
                                    { id: '3-26', title: '开发任务一' },
                                    { id: '3-27', title: '这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务,这是一条文字很长的任务，这是一条文字很长的任务。' },
                                    { id: '3-28', title: '第3行' },
                                    { id: '3-29', title: '第4行' },
                                    { id: '3-30', title: '第5行' },
                                ]
                        },
                        {
                            id: 't4',
                            title: '测试任务1',
                            taskList:
                                [{ id: '2-1', title: '测试任务1' }]
                        },
                        {
                            id: 't5',
                            title: '测试任务2',
                            taskList:
                                [{ id: '2-1', title: '测试任务1' }]
                        },
                        {
                            id: 't6',
                            title: '测试任务3',
                            taskList:
                                [{ id: '2-1', title: '测试任务1' }]
                        },
                        {
                            id: 't7',
                            title: '测试任务4',
                            taskList:
                                [{ id: '2-1', title: '测试任务1' }]
                        },
                        {
                            id: 't8',
                            title: '测试任务5',
                            taskList:
                                [{ id: '2-1', title: '测试任务1' }]
                        },

                    ],

            }
        },
        computed: {
            dragOptions1() {
                return {
                    animation: 120,
                    group: 'description1',
                    ghostClass: 'ghost',
                };
            },
            dragOptions2() {
                return {
                    animation: 120,
                    group: 'description2',
                    ghostClass: 'ghost',
                    sort:true

                };
            }
        }
    }
</script>
<style scoped>
    .list-group-item {
        position: relative;
        display: block;
        padding: 10px 15px;
        margin-bottom: -1px;
        background-color: #fff;
        border: 1px solid #eee;
        margin: 0 5px 5px 5px;
        border-radius: 3px;
        cursor: pointer;
    }




    .list-group-item:hover {
        border-color: #87b4ee;
    }

    .placeholder-style {
        display: block !important;
        color: transparent;
        border-style: dashed !important;
    }

    .transition-group-list {
        display: block;
        min-height: 20px;
    }

    .ghost {
        /* opacity: 0; */
        background: #eeeeee;
        color: #eeeeee;
    }



    .draggableul {
        width: 200px;
        background: white;
        text-align: center;
        padding: 10px;
        cursor: all-scroll;
    }

    .box-card {
        width: 288px;
        margin: 10px 10px;
    }

    .card-arrow-down {
        color: balck;
        cursor: pointer;
        font-size: 20px;
    }

    .draggableList {
        padding-bottom: 300px;
    }

    .card-list-head {
        font-weight: bold;
    }

    .el-card__header {
        padding: 10px 20px;
    }
</style>